<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//1.修改每个th的颜色
				document.getElementsByTagName("tr")[0].style.background="green";
				//2.奇数行为蓝色，偶数行为红色(js代码动态);
				//创建方法，传入需要自动生成多少个a*a的表格	
					estParty(5);//行
					//estList(5);//列
			} 
			//每行
			function estParty(a){
				for (var n=0;n<a;n++) {
					var tableNode=document.getElementsByTagName("table")[0];//找到table标签
					var newTrNode=document.createElement("tr");//创建新的tr
						newTrNode.index=n+1;//给每一个新的tr一个属性index他的值是n+1
					for (var m=0;m<a;m++) {//循环给新的tr添加五个td
						var tdNode=document.createElement("td");//创建新的td
						tdNode.innerHTML="9";//给新的td一个文本节点是9；
						newTrNode.appendChild(tdNode);
						if(tdNode.parentNode.index%2==0){//判断当前这个新的td的父节点的index值是偶数还是奇数
							tdNode.style.background="red";
						}else{//奇数蓝色，偶数红色;
							tdNode.style.background="blue"; 
						}
					}
					tableNode.appendChild(newTrNode);//向table添加这个新的tr五次
				}
			}
			
			//每列不同
			function estList(a){
				for (var n=0;n<a;n++) {
					var tableNode=document.getElementsByTagName("table")[0];//找到table标签
					var newTrNode=document.createElement("tr");//创建新的tr
					for (var m=0;m<a;m++) {//循环给新的tr添加五个td
						var tdNode=document.createElement("td");//创建新的td
						tdNode.innerHTML="9";//给新的td一个文本节点是9；
						newTrNode.appendChild(tdNode);
						tdNode.index=m+1;//给每一个td一个属性值，属性的值是m+1
						if((m+1)%2==0){//判断当前这个新的td的index值是偶数还是奇数
							tdNode.style.background="red";
						}else{//奇数蓝色，偶数红色;
							tdNode.style.background="blue"; 
						}
					}
					tableNode.appendChild(newTrNode);//向table添加这个新的tr五次
				}
			}
		</script>
	</head>
	<body>
		<table border="1">
				<tr>
					<th class="" >部门名称</th>
					<th class="">部门电话</th>
					<th class="">部门负责人</th>
					<th class="">所属单位</th>
					<th class="">操作</th>
				</tr>
				<tr id="xy">
					<td>2</td>
					<td>1</td>
					<td>2</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr class="tt">
					<td>3</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
		</table>
	</body>
</html>
